<template>
  <div>
    <!-- 精选题库 表单组件 -->
    <el-form :model="searchForm">
        <el-row>
          <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10" style="height: 32px">
            <el-form-item label="学科" label-width="80px">
              <el-select
                v-model="searchForm.subjectID"
                @change="changeSelect"
                style="width: 100%"
              >
                <el-option
                  v-for="item in subjectSimple"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10">
            <el-form-item label="二级目录" label-width="80px">
              <el-select style="width: 100%" v-model="searchForm.catalogID">
                <el-option
                  v-for="item in secondLevelList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10">
            <el-form-item label="标签" label-width="80px">
              <el-select style="width: 100%" v-model="searchForm.tags">
                <el-option
                  v-for="item in tagsList"
                  :key="item.id"
                  :label="item.tagName"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10">
            <el-form-item label="关键字" label-width="80px">
              <el-input
                v-model="searchForm.keyword"
                placeholder="根据题干搜索"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10">
            <el-form-item label="试题类型" label-width="80px">
              <el-select style="width: 100%" v-model="searchForm.questionType">
                <el-option
                  v-for="item in questionTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10">
            <el-form-item label="难度" label-width="80px">
              <el-select style="width: 100%" v-model="searchForm.difficulty">
                <el-option
                  v-for="item in difficultyList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10">
            <el-form-item label="方向" label-width="80px">
              <el-select style="width: 100%" v-model="searchForm.direction">
                <el-option
                  v-for="item in direction"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10">
            <el-form-item label="录入人" label-width="80px">
              <el-select style="width: 100%" v-model="searchForm.creatorID">
                <el-option
                  v-for="item in creatorIDList"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10">
            <el-form-item label="题目备注" label-width="80px">
              <el-input v-model="searchForm.remarks" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10">
            <el-form-item label="企业简称" label-width="80px">
              <el-input v-model="searchForm.shortName" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10">
            <el-form-item label="城市" label-width="80px">
              <el-row type="flex">
                <el-select
                  style="width: 60%; margin-right: 10px"
                  v-model="searchForm.province"
                  @change="changeProvince"
                >
                  <el-option
                    v-for="item in provinceList"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
                <el-select style="width: 60%" v-model="searchForm.city">
                  <el-option
                    v-for="item in cityList"
                    :key="item"
                    :label="item"
                    :value="item"
                  >
                  </el-option>
                </el-select>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :xs="10" :xl="6" :lg="6" :md="8" :sm="10">
            <el-form-item>
              <el-row type="flex" justify="end">
                <!-- <el-button size="medium" @click="btnReset">重新加载</el-button> -->
                <el-button size="medium" @click="btnClear">清除</el-button>
                <el-button size="medium" type="primary" @click="btnSearch"
                  >搜索</el-button
                >
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
  </div>
</template>

<script>
import { list } from '../../api/hmmm/subjects'
import { simple as directorySimple } from '../../api/hmmm/directorys'
import { list as tagsList } from '../../api/hmmm/tags'
import * as baseConstanst from '../../api/hmmm/constants'
import { simple as userSimple } from '../../api/base/users'

import * as cityData from '../../api/hmmm/citys'
export default {
  name: 'CohiceForm',
  props: {
    searchForm: {
      type: Object,
      default: () => {}
    },
    // 学科列表
    subjectSimple: {
      type: Array,
      default: () => []
    },
    // 分页控制的搜索表单
    pageForm: {
      type: Object,
      default: () => {}
    },
    pageFlag: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      subjectList: [],
      secondLevelList: [], // 二级目录列表
      tagsList: [], // 标签列表
      questionTypeList: baseConstanst.questionType, // 试题类型列表
      difficultyList: baseConstanst.difficulty, // 难度列表
      direction: baseConstanst.direction, // 方向列表
      creatorIDList: [], // 录入人列表
      provinceList: cityData.provinces(),
      cityList: []
    }
  },
  created () {
    this.getSubject()
    this.getUserSimple()
  },
  methods: {
    async getSubject () {
      const {
        data: { items }
      } = await list()
      this.subjectList = items
      // console.log(this.subjectList)
    },
    // 二级目录
    async changeSelect (val) {
      // console.log(val)
      const { data } = await directorySimple({ subjectID: val })
      this.secondLevelList = data
      const {
        data: { items }
      } = await tagsList({ subjectID: val })
      // console.log(items)
      this.tagsList = items
    },
    // 获取录入人
    async getUserSimple () {
      const { data } = await userSimple()
      this.creatorIDList = data
      // console.log(this.creatorIDList)
    },
    // 城市
    changeProvince (val) {
      // console.log(val)
      this.cityList = cityData.citys(val)
    },
    // 清除
    btnClear () {
      Object.keys(this.searchForm).forEach((key) => {
        this.searchForm[key] = null
      })
      // this.$emit('update:pageForm', { ...this.searchForm, chkState: null })
    },
    // 搜索
    btnSearch () {
      // console.log(111)
      const res = Object.values(this.searchForm).filter(item => item)
      // console.log(res.length)
      this.$emit('update:searchForm', this.searchForm)
      this.$emit('update:tabsForm', { ...this.searchForm })
      // 判断表单是否有内容
      if (res.length) {
        this.$emit('update:pageFlag', true)
      }
      this.$emit('update:pageForm', { ...this.searchForm })
      this.$emit('btnSearch')
    },
    btnReset () {
      this.$emit('btnReset')
    }
  }
  // watch: {
  //   searchForm: {
  //     handler (newVal) {
  //       this.$emit('update:searchForm', newVal)
  //     },
  //     deep: true,
  //     immediate: true
  //   }
  // }
}
</script>

<style>

</style>
